<template>
  <div>
    <p class="title" v-show='!noautnory'>
      <span>用户组织：{{this.$store.state.agent}}</span>
      <span>组织负责人：{{this.$store.state.agenter}}</span>
      <span>电话：{{this.$store.state.phone}}</span>
    </p>
    <ul class="screen" v-show='!noautnory'>
      <li>
        <div>
          <p>风险等级</p>
          <b>{{risklevel}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>确认病例 </p>
          <b>{{confirmrisk}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>消杀场所数量 </p>
          <b>{{temperature}}</b>
        </div>
      </li>
      <li>
        <div>
          <p>今日场所消杀次数 </p>
          <b>{{testper}}</b>
        </div>
      </li>
    </ul>
    <div class="noautnory" v-show='noautnory'>
      <i class="el-icon-warning-outline"></i>
      <p>当前无权限</p>
    </div>
    <h3 class="vicetit" v-show='!noautnory'>
      消杀信息
      <span @click='dialogVisible = true'>批量导入</span>
      <span @click='addlist'>添加</span>
    </h3>
    <div class="menu" v-show='!noautnory'>
      <span>场所名称</span>
      <el-input class="inp" v-model="place" placeholder=""></el-input>
      <span class="studysta">负责人</span>
      <el-input class="inp" v-model="charge" placeholder=""></el-input>
      <el-button type="primary" class="search" @click="searchdata"><i class="el-icon-search"></i> 搜索</el-button>
      <span class="exports" @click='exports'>导出</span>
    </div>
    <div class="cabin" v-show='!noautnory'>
      <table>
        <thead>
          <tr>
            <th v-for="(v,i) in headlist1" :key='i'>{{v}}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(v,i) in datalist1" :key='i'>
            <!-- <td><i :class="v.sta == 0 ? 't1' : v.sta == 1 ? 't2' : v.sta == 2 ? 't3' : v.sta == 3 ? 't4' : ''"></i>{{ v.pid }}</td> -->
            <td><i class="t1"></i>{{ v.placeid }}</td>
            <td>{{ v.placename }}</td>
            <td>{{ v.placeseat }}</td>
            <td>{{ v.createtime }}</td>
            <td>{{ v.contact }}</td>
            <td>{{ v.phone }}</td>
            <td>
              <span class="edit" @click="editdetails(v,i)">编辑</span>
              <span class="detail" @click="todetails(v,i)">详情</span>
            </td>
          </tr>
          <tr v-show='datalist1.length == 0'>
            <td colspan="7" style="text-align: center;border-right: none;">无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    <el-pagination v-show='!noautnory' :current-page.sync="pagecurrent1" @current-change="handleSizeChange1" background
      layout="prev, pager, next" :total="pagetotal1">
    </el-pagination>

    <el-dialog title="添加消杀记录" :visible.sync="dialogTableVisible">
      <table class="combox">
        <thead>
          <tr>
            <th style="width: 100px;">场所ID</th>
            <th>场所名称</th>
            <th>消杀时间</th>
            <th style="width: 100px;">责任人</th>
            <th style="width: 120px;">联系电话</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input v-model="addobj.placeid" readonly placeholder="" /></td>
            <td>
              <!-- <input v-model="addobj.placename" placeholder="请输入" /> -->
              <el-select class='placetit' v-model="addobj.placename" @change="changename" placeholder="请选择">
                <el-option v-for="item in placelist" :key="item.placeid" :label="item.placename" :value="item.placename">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-date-picker v-model="addobj.createtime"
                              type="datetime"
                              style="width: 100%;"
                              popper-class="date-popper"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择日期时间"/>
            </td>
            <td><input v-model="addobj.contact" placeholder="请输入" /></td>
            <td><input v-model="addobj.phone" placeholder="请输入" /></td>
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canceladd">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑消杀记录" :visible.sync="dialogTableVisible2">
      <table class="combox">
        <thead>
          <tr>
            <th style="width: 100px;">场所ID</th>
            <th>场所名称</th>
            <!-- <th>场所位置</th> -->
            <th>消杀时间</th>
            <th style="width: 100px;">责任人</th>
            <th style="width: 120px;">联系电话</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <!-- <input v-model="editobj.id" type="number" placeholder="请输入" /> -->
              <span>{{editobj.placeid}}</span>
            </td>
            <td>
              <!-- <input v-model="editobj.placename" placeholder="请输入" /> -->
              <el-select class='placetit' v-model="editplacename" @change="changename2" placeholder="请选择">
                <el-option v-for="item in placelist" :key="item.placeid" :label="item.placename" :value="item.placename">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-date-picker v-model="editobj.createtime"
                              type="datetime"
                              style="width: 100%;"
                              popper-class="date-popper"
                              value-format="yyyy-MM-dd HH:mm:ss"
                              placeholder="选择日期时间"/>
            </td>
            <td><input v-model="editobj.contact" placeholder="请输入" /></td>
            <td><input v-model="editobj.phone" placeholder="请输入" /></td>
          </tr>
        </tbody>
      </table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="save2">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog class="uploadbin" title="提示" :visible.sync="dialogVisible" :close-on-click-modal="false" width="400px">
      <el-button type="primary" @click="imports">Excel模板文件</el-button>
      <el-upload ref="upload" :file-list="fileList" :limit="1" :action="uploadUrl" :data="{ userid: store.state.user.userid }"
        :on-exceed="onExceed" :on-change="onChange" :on-success="onSuccess" :on-error="onError" accept=".xlsx,xls"
        class="upload-demo" style="margin-left: 15px">
        <el-button slot="trigger" size="mini" type="primary">选择文件，批量上传</el-button>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script>
  import store from '@/store'
  export default {
    name: 'organization',
    data () {
      return {
        a: '',
        store,
        editplacename: '',
        editplaceseat: '',
        asd: 'asd',
        dialogVisible: false,
        dialogTableVisible: false,
        dialogTableVisible2: false,
        placelist: [],
        addobj: {
          placeid: '',
          placename: '',
          phone: '',
          createtime: '',
          contact: '',
          placeseat: ''
        },
        editobj: {
          // id: '',
          // placeid: '',
          // placename: '',
          // phone: '',
          // createtime: '',
          // contact: ''
        },
        noautnory: false,
        pagecurrent1: 1,
        pagetotal1: 10,
        pagecurrent: 1,
        pagesize: 10,
        ranklevel: '',
        risklevel: 'IV',
        temperature: 86,
        confirmrisk: 13,
        testper: 400,
        temrate: '0.16%',
        riskrate: '-1.84%',
        testrate: '-7.49%',
        agent: '深圳南山小学',
        agenter: '马小云',
        phone: '18767564768',
        place: '',
        charge: '',
        office1: '',
        office2: '',
        county: '',
        province: '广东教育局',
        city: '深圳市',
        headlist1: ['场所ID', '场所名称', '场所位置', '最新消杀时间', '负责人', '联系电话', '操作'],
        datalist1: [],
        fileList: [],
        uploadUrl: 'http://wcxt.bjyulinkeji.com/disinfect/disinfectimport'
      }
    },
    created() {
      this.getUserInfo();
    },
    mounted() {
      this.getlist();
      this.getplace()
    },
    methods: {
      // 上传失败
      onError({
        code,
        message
      }) {
        this.$notify.error(message)
      },
      // 上传成功
      onSuccess({
        code,
        message
      }) {
        if (code != 200) {
          this.$notify.error(message)
          return
        }
        this.$notify.success('导入文件成功')
        this.dialogVisible = false
        this.$router.push('/organizationAdministration')
      },
      exports(){
        let code = this.schoolno + ''
        location.href = 'http://wcxt.bjyulinkeji.com/disinfect/batchexport?schoolno=' + code
      },
      imports() {
        location.href = 'http://wcxt.bjyulinkeji.com/disinfect/template/export?userid=' + store.state.user.userid
      },
      onExceed() {
        this.$notify.warning('只能选择一个文件上传，若要更换文件，请先移除之前的文件')
      },
      onChange(file) {
        this.fileList = [].concat(file)
      },
      // 添加选场所名称
      changename(v) {
        console.log(v)
        this.addobj.placename = v;
        // this.$forceUpdate();
        // this.$set(this.addobj, 'placename', v)

        this.placelist.forEach(val => {
          if (v == val.placename) {
            this.addobj.id = val.placeid;
            this.addobj.placeid = val.placeid;
            this.addobj.placeseat = val.placeseat;
          }
        })
      },
      // 编辑选场所名称

      changename2(v) {
        console.log(v)
        this.editplacename = v;
        this.placelist.forEach(val => {
          if (v == val.placename) {
            // this.addobj.id = val.placeid;
            this.editobj.placeid = val.placeid;
            this.editplaceseat = val.placeseat;
          }
        })
      },
      canceladd() {
        this.addobj.id = '';
        this.addobj.placename = '';
        this.addobj.phone = '';
        this.addobj.createtime = '';
        this.addobj.contact = '';
        this.dialogTableVisible = false
      },
      save () {
        if (!this.addobj.placename) {
          this.$notify.warning('请填写场所名称')
          return
        }
        if (!this.addobj.createtime) {
          this.$notify.warning('请填写消杀时间')
          return
        }
        if (!this.addobj.contact) {
          this.$notify.warning('请填写责任人')
          return
        }
        if (!this.addobj.phone) {
          this.$notify.warning('请填写联系电话')
          return
        }
        if (this.addobj.phone.length !== 11) {
          this.$notify.warning('请填写正确的联系电话')
          return
        }
        this.dialogTableVisible = false;
        this.addrecord();
      },
      editdetails(v, i) {
        let item = JSON.parse(JSON.stringify(v))
        this.editobj = item
        this.editplacename = item.placename
        this.dialogTableVisible2 = true
      },
      save2() {
        if (!this.editobj.placename) {
          this.$notify.warning('请填写场所名称')
          return
        }
        if (!this.editobj.createtime) {
          this.$notify.warning('请填写消杀时间')
          return
        }
        if (!this.editobj.contact) {
          this.$notify.warning('请填写责任人')
          return
        }
        if (!this.editobj.phone) {
          this.$notify.warning('请填写联系电话')
          return
        }
        if (this.editobj.phone.length !== 11) {
          this.$notify.warning('请填写正确的联系电话')
          return
        }
        this.dialogTableVisible2 = false;
        this.editrecord()
      },
      addlist() {
        this.dialogTableVisible = true;
        this.addobj.placeid = '';
        this.addobj.placename = ''
      },
      handleSizeChange1(val) {
        console.log(val);
        this.pagecurrent1 = val;
        this.getlist()
      },
      // 添加消杀
      addrecord() {
        var data = {
          // "id": '', /// 消杀id，如果是新增，可以补传值，修改必须传值
          "schoolno": this.schoolno, //学校id，登陆的时候能获取到
          "placeid": this.addobj.id, //场所id
          "placename": this.addobj.placename, // 场所名称
          "placeseat": this.addobj.placeseat, //消杀地点
          "phone": this.addobj.phone, //联系电话
          "contact": this.addobj.contact, // #负责人
          "createtime": this.addobj.createtime // #消杀时间
        };
        console.log(data);
        this.$http('/disinfect/saveOrUpdate', data).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.getlist()
          }
        })
      },
      // 编辑消杀
      editrecord() {
        const data = {
          "id": this.editobj.id, /// 消杀id，如果是新增，可以补传值，修改必须传值
          "schoolno": this.editobj.schoolno || this.schoolno, //学校id，登陆的时候能获取到
          "placeid": this.editobj.placeid, //场所id
          "placename": this.editobj.placename || this.editplacename, // 场所名称
          "placeseat": this.editobj.placeseat || this.editplaceseat, //消杀地点
          "phone": this.editobj.phone, //联系电话
          "contact": this.editobj.contact, // #负责人
          "createtime": this.editobj.createtime // #消杀时间
        };
        console.log(data);
        this.$http('/disinfect/saveOrUpdate', data).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getlist()
          }
        })
      },
      // 获取消杀信息列表
      getlist() {
        this.$http('/disinfect/getmanage', {
          "personincharge": this.charge,
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize,
          "organizaitonname": this.place,
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.datalist1 = res.data.tplace.records
          } else {
            this.datalist1 = [];
          }
        })
      },
      // 获取场所名称
      getplace() {
        this.$http('/disinfect/getmanage', {
          "personincharge": this.charge,
          "pagecurrent": this.pagecurrent,
          "pagesize": this.pagesize,
          "organizaitonname": this.place,
        }).then(res => {
          console.log(res)
          if (res.code == 200) {
            this.placelist = res.data.tplacelist
          } else {
            this.placelist = [];
          }
        })
      },
      // 用户信息
      getUserInfo() {
        this.$http('/user/loginindex', {}).then(
          res => {
            console.log(res)
            if (res.code == 200) {
              this.$store.commit('changeagent', res.data.user.organizationname);
              this.$store.commit('changeagenter', res.data.user.collegename);
              this.$store.commit('changeuser', res.data.user.username);
              this.$store.commit('changephone', res.data.user.phone);
              this.$store.commit('changerole', res.data.roleid);
              this.$store.commit('changeposition', res.data.user.position);
              this.arealist = res.data.adress;
              this.provinceno = res.data.user.provinceid;
              this.cityno = res.data.user.cityid;

              if (res.data.classinfo) {
                this.schoolno = res.data.classinfo.schoolno;
              }
              if (res.data.classinfo) {
                this.classno = res.data.classinfo.classno
              }

              switch (res.data.roleid) {
                case 1002:
                  this.provinceFlag = true;
                  break;
                case 1003:
                  this.cityFlag = true;
                  break;
                case 1005:
                  this.schoolFlag = true;
                  break;
                case 1006:
                  this.gradeFlag = true;
                  break;
              }

              switch (this.$store.state.role) {
                case 1001:
                  this.ranklevel = '1';
                  this.noautnory = true;
                  break;
                case 1002:
                  this.ranklevel = '2';
                  this.noautnory = true;
                  break;
                case 1003:
                  this.ranklevel = '3';
                  this.noautnory = true;
                  break;
                case 1004:
                  this.ranklevel = '';
                  break;
                case 1005:
                  this.ranklevel = '4';
                  this.noautnory = false;
                  break;
                case 1006:
                  this.ranklevel = '5';
                  this.noautnory = false;
                  break;
              };
              this.getStatistics();
            }
          }
        )
      },
      getStatistics() {
        this.$http('/health/healthInfoStatistics/getStatistics', {
          "ranklevel": this.ranklevel,
          "provinceno": this.provinceno,
          "schoolno": this.schoolno,
          "cityno": this.cityno,
          "istoday": '',
          "statisticstype": '',
          "schoolLevel": this.schoolLevel,
          "personType": this.personType
        }).then(
          res => {
            console.log(res);
            if (res.code == 200) {
              this.risklevel = res.data[0].risklevel;
              // 四大块
              res.data.forEach(v => {
                switch (v.text) {
                  case '测温异常人数':
                    this.temperature = v.count;
                    break;
                  case '今日确诊':
                    this.confirmrisk = v.count;
                    break;
                  case '日核酸检测':
                    this.testper = v.count;
                    break;
                }
              });
            }
          }
        )
      },
      todetails(v, i) {
        console.log(i);
        var item = JSON.stringify(v)
        this.$router.push({
          path: '/disindectdetail',
          query: {
            text: item
          }
        })
      },
      searchdata() {
        this.getlist()
      }
    }
  }
</script>

<style lang="less" scoped>
  .placetit {
    /deep/ .el-input__inner {
      color: #000;
    }
  }

  /deep/ .el-dialog {
    width: 800px;
  }

  .combox {
    display: table;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;

    thead {
      th {
        border: 1px solid #ccc;
        text-align: center;
        font-size: 14px;
        line-height: 34px;
        padding: 0 5px;
      }
    }

    tbody {
      td {
        text-align: center;
        border: 1px solid #ccc;

        input {
          display: inline-block;
          text-align: center;
          width: 100%;
          border: none;
          font-size: 14px;
          color: #333;
          line-height: 34px;

          &:focus {
            outline: none;
          }
        }
      }
    }
    /deep/ .el-input input {color: #333;}
  }

  .noautnory {
    text-align: center;
    background: #2c2c2c;
    padding: 40px 0;

    i {
      font-size: 80px;
      color: white;
    }

    p {
      font-size: 14px;
      color: white;
      line-height: 44px;
      text-align: center;
    }
  }

  /deep/ .el-pagination {
    margin: 30px 0;
  }

  /deep/ .el-pagination.is-background .btn-next,
  /deep/ .el-pagination.is-background .btn-prev,
  /deep/ .el-pagination.is-background .el-pager li {
    background-color: #090f42;
    color: #fff;
    border: 1px solid #1a2497;
  }

  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1520be;
    border-color: #1520be;
  }

  .title {
    font-size: 14px;
    color: white;

    span {
      margin-right: 30px;
    }
  }

  // 四个大屏
  .screen {
    width: 100%;
    display: flex;
    margin: 30px 0;
    justify-content: space-between;

    li {
      display: inline-block;
      width: 256px;
      height: 192px;
      background-color: white;

      div {
        padding-left: 70px;
        margin-top: 20px;
        padding-right: 35px;

        p {
          font-size: 14px;
          color: #fff;
          line-height: 30px;

          span {
            float: right;
            font-size: 12px;

            &.tems {
              color: #2ba301;
            }

            &.risks {
              color: #ff1812;
            }
          }
        }

        b {
          font-size: 24px;
          color: #fff;
        }
      }

      &:nth-child(1) {
        background-color: #000418;
        background-image: url(../assets/images/t1.png);
        background-repeat: no-repeat;
        background-position: 50% 72px;
        background-size: 346px;

        div {
          background: url(../assets/images/risk.png) no-repeat 20px center;
          background-size: 30px;
        }
      }

      &:nth-child(2) {
        background-color: #000418;
        background-image: url(../assets/images/t2.png);
        background-repeat: no-repeat;
        background-position: 50% 72px;
        background-size: 346px;

        div {
          background: url(../assets/images/temperature.png) no-repeat 20px center;
          background-size: 30px;
        }
      }

      &:nth-child(3) {
        background-color: #000418;
        background-image: url(../assets/images/t3.png);
        background-repeat: no-repeat;
        background-position: 50% 26px;
        background-size: 346px;

        div {
          background: url(../assets/images/case.png) no-repeat 20px center;
          background-size: 30px;
        }
      }

      &:nth-child(4) {
        background-color: #000418;
        background-image: url(../assets/images/t4.png);
        background-repeat: no-repeat;
        background-position: 50% 80px;
        background-size: 350px;

        div {
          background: url(../assets/images/test.png) no-repeat 20px center;
          background-size: 30px;
        }
      }
    }
  }


  .vicetit {
    line-height: 50px;
    font-size: 16px;
    color: #fff;
    margin: 30px 0;
    border-bottom: 1px solid #7d7d7d;
  }

  .vicetit span {
    font-size: 14px;
    color: #1e29ad;
    float: right;
    margin-left: 30px;
    font-weight: normal;
    cursor: pointer;

    &:hover {
      color: white;
    }
  }

  .menu {
    display: flex;
    justify-content: start;
    margin: 40px 0;

    .haveclasssta {
      /deep/ .el-input__inner {
        background-color: transparent;
        color: #fff;
      }
    }

    span {
      line-height: 40px;
      font-size: 14px;
      color: #fff;
      display: inline-block;
      margin-right: 15px;
    }

    .studysta {
      margin-left: 20px;
    }

    .exports {
      font-size: 14px;
      color: #1e29ad;
      cursor: pointer;

      &:hover {
        color: #fff;
      }
    }

    .inp {
      width: 200px;

      /deep/ .el-input__inner {
        color: #fff;
        background-color: transparent;
      }
    }

    .search {
      margin: 0 25px 0 30px;
      background-color: #1e29ad;
      border-color: #1e29ad;

      &:hover {
        background-color: #409EFF;
        border-color: #409EFF;
      }
    }

    .el-date-editor {
      /deep/ .el-input__prefix {
        display: none;
      }

      /deep/ .el-input__inner {
        background-color: transparent;
        color: #fff;
      }
    }
  }

  .cabin {
    padding: 10px 20px;
    background: #000;

    table {
      width: 100%;
      display: table;
      border-collapse: collapse;

      thead {
        border-bottom: 1px solid #313445;

        th {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
          line-height: 60px;

          &:first-child {
            border-right: 1px solid #313445;
          }
        }
      }

      tbody {
        tr {
          td {
            &:first-child {
              border-right: 1px solid #313445;
            }
          }
        }

        td {
          font-size: 13px;
          color: #fff;
          text-align: center;
          line-height: 60px;

          span {
            margin: 0 6px;
          }

          .edit {
            color: #2a36e0;
            cursor: pointer;

            &:hover {
              color: orangered;
            }
          }

          .detail {
            color: #2a36e0;
            cursor: pointer;

            &:hover {
              color: orangered;
            }
          }

          i {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
          }

          .t1 {
            background-color: #3c3694;
          }

          .t2 {
            background-color: #ca8c38;
          }

          .t3 {
            background-color: #8a58d1;
          }

          .t4 {
            background-color: #c5506f;
          }
        }
      }
    }
  }

.uploadbin{
  /deep/ .upload-demo,
  /deep/ .el-dialog__body {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  /deep/ .upload-demo {
    .el-button {
      height: 40px;
    }
    .el-upload-list__item-name,
    .el-upload-list__item-name .el-icon-document {
        color: #fff !important;
    }
  }

  /deep/ .el-dialog,
  /deep/ .el-pager li {
    background-color: transparent;
  }

  /deep/ .el-dialog__header,
  /deep/ .el-dialog__body {
    border: 1px solid #0070ff;
    background-color: rgba(0, 112, 255, 0.2);
  }

  /deep/ .el-dialog__header {
    border-bottom: none;
    .el-dialog__title {
        display: inline-block;
        width: 100%;
        text-align: center;
        color: #fff;
    }
  }

  /deep/ .el-dialog__body {
    border-top: none;
  }
  // 上传成功后右边的信息  隐藏
  /deep/ .el-upload-list--text{
    display: none !important;
  }
}

</style>
